<template>
    <div>
        <!-- 共用头部组件 -->
        <common-header
            headerTitle="百领好货"
            :hasBack="true"
            :hasHome="true"
        ></common-header>
        <!-- 共用头部组件 -->

        <!-- 共用页面滚动组件 -->
        <common-scroll
            :scrollStyle="scrollStyle"
            :isLoadMore="false"
        >

            <div class="img-box">
                <img
                    src="@/assets/images/staticPages/index3/1.jpg"
                    style="width: 100%;height: 100%;"
                    @click="goGoods(397)"
                />
                <img
                    src="@/assets/images/staticPages/index3/2.jpg"
                    style="width: 50%;height: 100%;"
                    @click="goGoods(224)"
                />
                <img
                    src="@/assets/images/staticPages/index3/3.jpg"
                    style="width: 50%;height: 100%;"
                    @click="goGoods(321)"
                />
                <img
                    src="@/assets/images/staticPages/index3/4.jpg"
                    style="width: 50.266%;height: 100%;"
                    @click="goGoods(182)"
                />
                <img
                    src="@/assets/images/staticPages/index3/5.jpg"
                    style="width: 49.734%;height: 100%;"
                    @click="goGoods(41)"
                />
                <img
                    src="@/assets/images/staticPages/index3/6.jpg"
                    style="width: 50.4%;height: 100%;"
                    @click="goGoods(257)"
                />
                <img
                    src="@/assets/images/staticPages/index3/7.jpg"
                    style="width: 49.6%;height: 100%"
                    @click="goGoods(39)"
                />
                <img
                    src="@/assets/images/staticPages/index3/8.jpg"
                    style="width: 50.666%;height: 100%;"
                    @click="goGoods(234)"
                />
                <img
                    src="@/assets/images/staticPages/index3/9.jpg"
                    style="width: 49.334%;height: 100%;"
                    @click="goGoods(89)"
                />
                <img
                    src="@/assets/images/staticPages/index3/10.jpg"
                    style="width: 50.666%;height: 100%;"
                    @click="goGoods(171)"
                />
                <img
                    src="@/assets/images/staticPages/index3/11.jpg"
                    style="width: 49.334%;height: 100%;"
                    @click="goGoods(227)"
                />
            </div>

        </common-scroll>
        <!-- 共用页面滚动组件 -->
    </div>
</template>

<script>
import CommonHeader from '@/components/Header'
import CommonScroll from '@/components/Scroll'
export default {
    name: 'Index3',
    components: {
        CommonHeader,
        CommonScroll
    },
    data() {
        return {
            scrollStyle: {
                top: '1.11rem',
                left: '0',
                right: '0',
                bottom: '0',
                background: '#fff'
            }
        }
    },
    methods: {
        goGoods(id) {
            this.$router.push({
                path: '/goodsDetail',
                query: {
                    goodsId: id,
                    goodsType: 0
                }
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.img-box
    display flex
    flex-wrap wrap
</style>


